<template>
  <div class="div-one">
    <div class="div-two">
      <el-form :inline="true" class="demo-form-inline" ref="form" :model="form">
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="标签名称">
              <el-input
                placeholder="请输入"
                v-model="form.tags"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="城市">
              <el-select placeholder="请选择" v-model="form.province">
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="地区">
              <el-select placeholder="请选择" v-model="form.city">
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称">
              <el-input
                placeholder="请输入"
                v-model="form.shortName"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="状态">
              <el-select placeholder="请选择" v-model="form.state">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="15"
            ><el-button @click="clear">清空</el-button
            ><el-button type="primary" @click="search">搜索</el-button></el-col
          >
          <el-col :span="3"
            ><el-button type="success" icon="el-icon-edit" @click="addUser"
              >新增用户</el-button
            ></el-col
          >
        </el-row>
      </el-form>
    </div>
    <div class="div-res">
      <i class="el-icon-info">共{{ total }}条记录</i>
    </div>
    <!-- 表格部分 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="企业编号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shortName"
          label="企业简称"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="creatorID"
          label="创建者"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="180" align="center">
        </el-table-column>
        <el-table-column label="状态" width="100" align="center" prop="state">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="edit(scope.row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-check"
              circle
              plain
              v-if="scope.row.state === '禁用'"
              @click="changeStatu(scope.row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-close"
              circle
              plain
              v-else
              @click="changeStatu(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="div-button">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryObj.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryObj.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <CompanysAdd
      ref="comAdd"
      :titleInfo="titleInfo"
      :formBase="formBase"
      @newDataes="newDataes"
    ></CompanysAdd>
  </div>
</template>

<script>
import { list, remove, disabled, detail } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants.js'
import CompanysAdd from '../components/companys-add.vue'
export default {
  data () {
    return {
      tableData: [],
      form: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: '',
        id: null
      },
      formBase: {
        company: '',
        isFamous: '',
        province: '',
        city: '',
        remarks: '',
        shortName: '',
        tags: ''
      },
      titleInfo: {
        text: '',
        pageTitle: ''
      },
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10
      },
      provinces: [],
      citys: [],
      status: []
    }
  },
  components: {
    CompanysAdd
  },
  created () {
    this.dataInfo()
  },

  methods: {
    async dataInfo () {
      const { data } = await list(this.queryObj)
      // console.log(data)
      this.tableData = data.items
      // console.log(this.renderDate)
      this.tableData = this.tableData.map(item => {
        item.state = item.state !== 1 ? '禁用' : '启用'
        return item
      })
      // console.log(this.form.state)
      this.total = data.counts
      this.provinces = provinces()
      this.status = [...status]
    },
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.dataInfo()
    },
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.dataInfo()
    },
    // 添加
    addUser () {
      this.titleInfo.text = '创建'
      this.titleInfo.pageTitle = '用户'
      this.$refs.comAdd.dialogFormV()
    },
    newDataes (formBase) {
      this.queryObj.page = 1
      this.queryObj.pagesize = 10
      console.log(formBase)
      this.dataInfo()
    },
    // 删除功能
    async del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          remove({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.dataInfo()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改状态
    async changeStatu (data) {
      // console.log(data)

      this.$confirm(`已成功${data.state}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // remove({ id })
          await disabled({ id: data.id, state: data.state === '启用' ? 0 : 1 })
          // this.form.state = 0
          this.dataInfo()
          this.$message({
            type: 'success',
            message: `${data.state}成功!`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑
    async edit (id) {
      // console.log(id)
      this.form.id = id
      this.titleInfo.text = '编辑'
      this.titleInfo.pageTitle = '用户'
      const { data } = await detail(this.form)
      // console.log(data)
      this.formBase.shortName = data.shortName
      this.formBase.company = data.company
      this.formBase.city = data.city
      this.formBase.province = data.province
      this.formBase.tags = data.tags
      this.formBase.remarks = data.remarks
      this.formBase.isFamous = data.isFamous
      this.$refs.comAdd.dialogFormV()
    },
    // flag () {
    //   // console.log(this.$refs.cadd)
    //   this.$refs.box.dialogFormV()
    // }
    // 搜索
    async search () {
      const { data } = await list(this.form)
      // console.log(data)
      this.tableData = data.items
    },
    // 清空
    clear () {
      let key
      for (key in this.form) {
        this.form[key] = ''
      }
      this.dataInfo()
    }
  },
  watch: {
    'form.province' (value) {
      this.form.city = ''
      this.citys = citys(value)
    }
  }
}
</script>

<style scoped lang="less">
.div-one {
  padding: 20px;
  .div-two {
    padding: 20px;
    background-color: #fff;
    span {
      margin-left: 600px;
    }
  }
  .div-res {
    padding: 20px;
  }
  .div-button {
    background-color: #fff;
    padding: 20px 0;
    padding-left: 600px;
  }
}
</style>
